<script setup>
import {
	Management,
	Promotion,
	UserFilled,
	User,
	Crop,
	EditPen,
	SwitchButton,
	CaretBottom,
} from "@element-plus/icons-vue";

import avatar from "@/assets/default.png";

//导入接口函数
import { userInfoGetService } from "@/api/user.js";
//导入pinia
import { useUserInfoStore } from "@/stores/user.js";
const userInfoStore = useUserInfoStore();
import { ref } from "vue";

const name = ref("");

//获取个人信息
const getUserInf = async () => {
	let result = await userInfoGetService();
	//存储pinia
	userInfoStore.info = result.data;
	name.value = result.data.nickname
		? result.data.nickname
		: result.data.userkname;
};
getUserInf();

import { useRouter } from "vue-router";
const router = useRouter();
import { ElMessage, ElMessageBox } from "element-plus";
import { useTokenStore } from "@/stores/token.js";
const tokenStore = useTokenStore();
const handleCommand = (command) => {
	if (command === "logout") {
		//退出登录
		ElMessageBox.confirm("你确认退出登录码？", "温馨提示", {
			confirmButtonText: "确认",
			cancelButtonText: "取消",
			type: "warning",
		})
			.then(async () => {
				//用户点击了确认
				//清空pinia中的token和个人信息
				userInfoStore.info = {};
				tokenStore.token = "";
				//跳转到登录页
				router.push("/login");
			})
			.catch(() => {
				//用户点击了取消
				ElMessage({
					type: "info",
					message: "取消退出",
				});
			});
	} else {
		//路由
		router.push("/user/" + command);
	}
};
</script>

<template>
	<el-container class="layout-container">
		<!-- 左侧菜单 -->
		<el-aside width="200px">
			<div class="el-aside__logo"></div>
			<el-menu
				active-text-color="#eee"
				background-color="rgb(249, 247, 247)"
				text-color="rgb(94, 100, 100)"
				router>
				<el-menu-item index="/article/category">
					<el-icon>
						<Management />
					</el-icon>
					<span>分类管理</span>
				</el-menu-item>
				<el-menu-item index="/article/manage">
					<el-icon>
						<Promotion />
					</el-icon>
					<span>文章管理</span>
				</el-menu-item>
				<el-sub-menu>
					<template #title>
						<el-icon>
							<UserFilled />
						</el-icon>
						<span>个人中心</span>
					</template>
					<el-menu-item index="/user/info">
						<el-icon>
							<User />
						</el-icon>
						<span>基本资料</span>
					</el-menu-item>
					<el-menu-item index="/user/avatar">
						<el-icon>
							<Crop />
						</el-icon>
						<span>更换头像</span>
					</el-menu-item>
					<el-menu-item index="/user/resetPassword">
						<el-icon>
							<EditPen />
						</el-icon>
						<span>重置密码</span>
					</el-menu-item>
				</el-sub-menu>
			</el-menu>
		</el-aside>
		<!-- 右侧主区域 -->
		<el-container>
			<!-- 头部区域 -->
			<el-header>
				<div>
					欢迎：<strong>{{ name }}</strong>
				</div>
				<el-dropdown placement="bottom-end" @command="handleCommand">
					<span class="el-dropdown__box">
						<el-avatar
							:src="
								userInfoStore.info.userPic ? userInfoStore.info.userPic : avatar
							" />
						<el-icon>
							<CaretBottom />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="info" :icon="User"
								>基本资料</el-dropdown-item
							>
							<el-dropdown-item command="avatar" :icon="Crop"
								>更换头像</el-dropdown-item
							>
							<el-dropdown-item command="resetPassword" :icon="EditPen"
								>重置密码</el-dropdown-item
							>
							<el-dropdown-item command="logout" :icon="SwitchButton"
								>退出登录</el-dropdown-item
							>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</el-header>
			<!-- 中间区域 -->
			<el-main>
				<!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
                    内容展示区
                </div> -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<style lang="scss" scoped>
.layout-container {
	height: 100vh;

	.el-aside {
		background-color: #f9f9f9;

		&__logo {
			height: 120px;
			background: url("@/assets/文章.png") no-repeat center / 80px auto;
		}

		.el-menu {
			margin-top: 80px;
			border-right: none;
			.el-menu-item.is-active {
				background: #559d8b !important;
			}
		}
	}

	.el-header {
		background-color: #89d3b7;
		color: #252222;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.el-dropdown__box {
			display: flex;
			align-items: center;

			.el-icon {
				color: #999;
				margin-left: 10px;
			}

			&:active,
			&:focus {
				outline: none;
			}
		}
	}

	.el-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #666;
	}
}
</style>
